import React, { useCallback, useEffect, useState } from 'react'
import { Layout, Menu, Dropdown } from 'antd'
import { connect } from 'react-redux'

import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    BankOutlined,
    ExceptionOutlined,
    AccountBookOutlined,
    FundViewOutlined,
    ApartmentOutlined,
    DownOutlined
  } from '@ant-design/icons'

import './MainLayout.less'
import { withRouter } from 'react-router-dom'
import { CLEAR_DATA } from '../../store/types'

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

function mainLayout(Child){
    function MainLayout({ menu, history, location, userInfo, dispatch }) {

        let myProps = arguments[0]

        const [collapsed, setCollapsed] = useState(false),//菜单收起状态
            [menuList, setMenuList] = useState([]),
            [menuIcon, setMenuIcon] = useState([
                {icon: <BankOutlined />},
                {icon: <ExceptionOutlined />},
                {icon: <AccountBookOutlined />},
                {icon: <FundViewOutlined />},
                {icon: <ApartmentOutlined />}
            ]),
            [selectedKeys, setSelectedKeys] = useState([]),
            [openKeys, setOpenKeys] = useState([]),
            [navPath, setNavPath] = useState('')
        
        //菜单栏初始化
        let list = []
        useEffect(function(){
            //遍历出第一层菜单
            for(let i = 0;i < menu.length; i++){
                if(menu[i].parentId === ''){
                    list.push(menu[i])
                } 
            }
            //遍历添加菜单栏图标
            for(let n = 0; n < list.length; n++){
                list[n].icon = menuIcon[n].icon
            }
            //遍历添加子级菜单
            let data = []
            for(let item of list){
                for(let it of menu){
                    if(it.parentId === item.id){
                        data.push(it)
                        item.children = data
                    }
                }
                data = []
            }
            setMenuList(list)

            let pathName = location.pathname,
                pathTitle = ''
            
                console.log(list)
            for(let it of list){
                for(let item of it.children){
                    if(item.path === pathName){
                        console.log(pathName)
                        setSelectedKeys([item.id])
                        setOpenKeys([it.id])

                        pathTitle = it.name + '/' + item.name
                        setNavPath(pathTitle)

                        break
                    }
                }
                if(!!pathTitle) break
            }

        }, [])

        //菜单栏点击事件
        const menuEvt = useCallback(function(row){
            console.log(row)
            history.push(row.path)
        }, [])


        return (
            <Layout className='mainLayout-box'>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <div className="logo">
                        <p>一百贸易管理系统</p>
                    </div>
                    <Menu theme="dark"
                        mode="inline"
                        openKeys={openKeys}
                        selectedKeys={selectedKeys}
                        defaultSelectedKeys={['HOME-01']}
                        onOpenChange={function(openKey){
                            console.log(openKey)
                            setOpenKeys(openKey)
                        }}>
                        {
                            menuList.map(it => {
                                
                                    return (
                                        <SubMenu key={it.id} icon={it.icon} title={it.name}>
                                            {
                                                it.children.map(item => {
                                                    return(
                                                        <Menu.Item onClick={menuEvt.bind(null, item)} key={item.id}>{item.name}</Menu.Item>
                                                    )
                                                })
                                            }
                                        </SubMenu>
                                    )
                            })
                        }
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <div>
                            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                className: 'trigger',
                                onClick:function(){
                                    setCollapsed(!collapsed)
                                },
                            })}
                            <span style={{ marginLeft: 16, fontSize: 18 }}>{navPath}</span>
                        </div>
                        <div style={{ height: 40, marginRight: 20, cursor: 'pointer', fontSize: 16, lineHeight: '40px' }}>
                            <Dropdown trigger={['click']}
                                overlay={
                                <Menu>
                                    <Menu.Item key="1">修改密码</Menu.Item>
                                    <Menu.Item key="2" onClick={function(){

                                        dispatch({type: CLEAR_DATA})
                                        history.push('/login')
                                    }}>退出登录</Menu.Item>
                                </Menu>
                                }>
                                <span className="ant-dropdown-link"
                                    onClick={e => e.preventDefault()}>
                                    {userInfo.name} <DownOutlined />
                                </span>
                            </Dropdown>
                        </div>
                        
                        
                        {/* <Select 
                            defaultValue={userInfo.name} style={{ height: 40, marginRight: 20 }} bordered={false}>
                            <Select.Option value="jack">修改密码</Select.Option>
                            <Select.Option value="outLogin" onClick={function(){
                                console.log('推出')
                            }}>退出系统</Select.Option>
                        </Select> */}
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        }}>
                            <Child {...myProps}/>
                    </Content>
                </Layout>
            </Layout>
        )
    }
    const mapStateToProps = function(state) {
        return{ 
            menu: state.common.menuList,
            userInfo: state.common.userInfo
        }
    }
    return connect(mapStateToProps)(withRouter(MainLayout))
}
export default mainLayout
